<template>
  <wd-form ref="formRef" :model="model" :rules="rules">
    <wd-cell-group>
      <wd-input label="姓名" label-width="100px" prop="real_name" clearable v-model="model.real_name"
        placeholder="请输入姓名" />
      <wd-input label="微信号" label-width="100px" prop="account" clearable v-model="model.account" placeholder="请输入微信号" />

      <wd-cell title="微信收款码" title-width="100px" prop="money_qr_code" :required="true">
        <wd-upload :limit="1" :file-list="fileList" image-mode="aspectFill" :header="header" :action="action"
          accept="image" @success="handleUploadSuccess"></wd-upload>
      </wd-cell>


      <wd-textarea prop="apply_remark" label="备注" v-model="model.apply_remark" placeholder="请输入备注" auto-height />
    </wd-cell-group>

  </wd-form>
</template>
<script setup>
import { ref, computed } from "vue";
import useUserStore from "@/store/user";  // 直接从 user store 导入
const formRef = ref();
const userStore = useUserStore();
const action = `${import.meta.env.VITE_SERVER_BASEURL}/shopapi/upload/image`;

const fileList = ref([])

const header = computed(() => {

  return {
    token: userStore.token,
    version: import.meta.env.VITE_VERSION,
  }
});

const model = ref({
  account: "",
  real_name: "",
  money_qr_code: "",
  apply_remark: "",
})

const rules = ref({
  account: [{ required: true, message: '请输入微信号' }],
  real_name: [{ required: true, message: '请输入姓名' }],
  money_qr_code: [{ required: true, message: '请上传微信收款码' }],
})

function handleUploadSuccess({ file, fileList }) {
  fileList.value = fileList
  const response = typeof file.response === "string" ? JSON.parse(file.response) : file.response;
  model.value.money_qr_code = response.data.uri
}

function sumbit() {

  return new Promise((resolve, reject) => {
    formRef.value
      .validate()
      .then(({ valid, errors }) => {
        if (valid) resolve(model.value)
      })
      .catch((error) => {
        reject(error)
        console.log(error, 'error')
      })
  })


}

defineExpose({
  sumbit
})

</script>
<style lang="scss" scoped></style>
